<!--背单词界面-->
<template>
  <div id="main" class="jianju">
    <el-row class="el-row">
      <el-col :span="24" class="juzhong ">
        <p style="font-size:50px;font-family: Hiragino Sans GB;color: #d3dce6">请选择您要学习的模式</p>
      </el-col>
    </el-row>
    <div>
      <el-row class="el-row" >
        <el-col :span="5" :offset="5" >
          <img src="../../static/image/zhong.png" class="image">
        </el-col>
        <el-col :span="5" :offset="5">
          <img src="static/image/ying.png" class="image" >
        </el-col>
      </el-row>
    </div>
    <div style="padding:20px">
      <el-row class="el-row">
        <el-col :span="9" class="juzhong" :offset="2">
          <el-button style="width:50%;margin-bottom:15px;" round plain @click="Chine">中译英模式</el-button>
        </el-col>
        <el-col :span="8" :offset="2" class="juzhong">
          <el-button style="width:50%;margin-bottom:25px;" round plain @click="English">英译中模式</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "ReciteWord",
  methods:{
    Chine(){
      this.$router.replace('/ReciteChineseToEnglish')
    },
    English(){
      this.$router.replace('/ReciteEnglishToChinese')
    }
  }
}
</script>

<style scoped>
.juzhong{
  text-align: center;
}
.jianju{
  margin-bottom: 20px;
}

#main{
  margin:10px;
  padding:150px;
  background-image: url('../../static/image/background.jpg');
  background-size: cover ;
  height: 576px ;
}

</style>
